<template>
  <div class="clue-trans-rule">
    <!-- 搜索工作栏 -->
    <div class="search-container">
      <el-form class="search-form" :model="queryParams" ref="queryFormRef" :inline="true">
        <div class="form-row">
          <el-form-item label="广告账号" prop="accountId" class="form-item">
            <el-select
              v-model="queryParams.accountId"
              placeholder="请选择广告账号"
              clearable
              class="custom-select"
              @change="handleQuery"
            >
              <el-option
                v-for="item in accountNameSimpleList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
                {{ item.name }}
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <div class="button-group">
          <el-button @click="handleQuery" class="search-btn">
            <Icon icon="ep:search" class="btn-icon" />
            搜索
          </el-button>
          <el-button @click="resetQuery" class="reset-btn">
            <Icon icon="ep:refresh" class="btn-icon" />
            重置
          </el-button>
          <el-button
            type="primary"
            plain
            @click="openForm('create')"
            v-hasPermi="['crm:module:update']"
            class="create-btn"
          >
            <Icon icon="ep:plus" class="btn-icon" />
            新建计划
          </el-button>
        </div>
      </el-form>
    </div>

    <!-- 列表 -->
    <div class="table-container">
      <el-table v-loading="loading" :data="list" :stripe="true" border class="custom-table">
        <el-table-column
          label="广告账号ID"
          align="center"
          prop="advertiserStrId"
          show-overflow-tooltip
          :min-width="120"
        >
        </el-table-column>
        <el-table-column
          label="广告账号名称"
          align="center"
          prop="advertiserName"
          show-overflow-tooltip
          :min-width="140"
        >
        </el-table-column>
        <el-table-column
          label="状态"
          align="center"
          prop="status"
          show-overflow-tooltip
          :min-width="80"
        >
          <template #default="scope">
            <el-tag :type="scope.row.status === 1 ? 'success' : 'info'" class="status-tag">
              {{ StatusMap[scope.row.status] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="执行间隔(分钟)"
          align="center"
          :min-width="120"
          prop="minInterval"
          show-overflow-tooltip
        />
        <el-table-column
          label="线索名称为空时过滤"
          align="center"
          :min-width="160"
          prop="filterEmptyName"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag :type="scope.row.filterEmptyName === 1 ? 'success' : 'info'" size="small">
              {{ scope.row.filterEmptyName == 0 ? '关' : '开' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="线索电话为空时过滤"
          align="center"
          :min-width="160"
          prop="filterEmptyMobile"
          show-overflow-tooltip
        >
          <template #default="scope">
            <el-tag :type="scope.row.filterEmptyMobile === 1 ? 'success' : 'info'" size="small">
              {{ scope.row.filterEmptyMobile == 0 ? '关' : '开' }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="转入位置"
          align="center"
          prop="transPos"
          show-overflow-tooltip
          :min-width="100"
        >
          <template #default="scope">
            <el-tag type="primary" size="small" class="trans-pos-tag">
              {{ TransPosMap[scope.row.transPos] }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column
          label="创建时间"
          align="center"
          prop="createTime"
          :formatter="dateFormatter"
          show-overflow-tooltip
          :min-width="140"
        />
        <el-table-column label="操作" align="center" :min-width="220" fixed="right">
          <template #default="scope">
            <div class="action-buttons">
              <el-button
                link
                type="primary"
                @click="checkRecords(scope.row.id)"
                v-hasPermi="['crm:module:update']"
                class="action-btn record-btn"
                size="small"
              >
                <Icon icon="ep:view" class="action-icon" />
                查看记录
              </el-button>
              <el-button
                link
                type="primary"
                @click="openForm('update', scope.row.id)"
                v-hasPermi="['crm:module:update']"
                class="action-btn edit-btn"
                size="small"
              >
                <Icon icon="ep:edit" class="action-icon" />
                编辑
              </el-button>
              <el-button
                link
                type="danger"
                @click="handleDelete(scope.row.id)"
                v-hasPermi="['crm:module:update']"
                class="action-btn delete-btn"
                size="small"
              >
                <Icon icon="ep:delete" class="action-icon" />
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </div>

    <!-- 分页 -->
    <div class="pagination-container">
      <Pagination
        :total="total"
        v-model:page="queryParams.pageNo"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <!-- 表单弹窗：添加/修改 -->
    <ClueTransRuleForm ref="formRef" @success="getList" />

    <Dialog title="查看执行记录" v-model="dialogVisible" width="1200">
      <CheckRecords :rule-id="ruleId" />
    </Dialog>
  </div>
</template>

<script setup lang="ts">
import * as ClueTransRuleApi from '@/api/crm/cluetransrule'
import ClueTransRuleForm from './ClueTransRuleForm.vue'
// import { getCluePoolList } from '@/api/crm/cluePool'
import { getAccountSimpleList } from '@/api/ad/account/index'
import { dateFormatter } from '@/utils/formatTime'
import CheckRecords from './Cluetranslog.vue'

defineOptions({ name: 'ClueTransRule' })
const props = defineProps({
  moduleId: {
    type: Number
  }
})

watch(
  () => props.moduleId,
  (newVal) => {
    queryParams.moduleId = newVal
    getList()
  }
)
const message = useMessage() // 消息弹窗
const { t } = useI18n() // 国际化

const loading = ref(true) // 列表的加载中
const total = ref(0) // 列表的总页数
const list = ref([]) // 列表的数据
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  accountId: null,
  moduleId: props.moduleId
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await ClueTransRuleApi.getClueTransRulePage(queryParams)
    list.value = data.list
    total.value = data.total
  } finally {
    loading.value = false
  }
}

const StatusMap = {
  0: '不启用',
  1: '启用'
}
const TransPosMap = {
  1: '线索列表',
  2: '线索公海'
}

const accountNameSimpleList = ref([]) // 广告账号列表

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id, accountNameSimpleList.value, props.moduleId)
}

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await ClueTransRuleApi.deleteClueTransRule(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

const dialogVisible = ref(false)
const ruleId = ref(null)
/** 查看执行记录 */
const checkRecords = (id) => {
  ruleId.value = id
  dialogVisible.value = true
}

/** 初始化 **/
onMounted(async () => {
  accountNameSimpleList.value = await getAccountSimpleList()
  getList()
})
</script>

<style scoped>
.clue-trans-rule {
  padding: 16px;
  background: #f8f9fa;
}

/* 搜索容器 */
.search-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.search-form {
  margin: 0;
}

.form-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
}

.form-item {
  margin-bottom: 0;
  flex: 1;
  min-width: 280px;
}

.custom-select {
  width: 100%;
  min-width: 260px;
}

.custom-select :deep(.el-input__wrapper.is-focus) {
  border-color: #0052cc;
  box-shadow: 0 0 0 1px #0052cc inset;
}

/* 按钮组 */
.button-group {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: flex-start;
}

.search-btn,
.reset-btn {
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.search-btn {
  background: #0052cc;
  border-color: #0052cc;
  color: white;
}

.search-btn:hover {
  background: #003d99;
  border-color: #003d99;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
}

.reset-btn {
  background: #f5f7fa;
  border-color: #dcdfe6;
  color: #606266;
}

.reset-btn:hover {
  background: #ecf5ff;
  border-color: #0052cc;
  color: #0052cc;
}

.create-btn {
  background: transparent;
  border-color: #0052cc;
  color: #0052cc;
  padding: 8px 16px;
  border-radius: 6px;
  font-weight: 500;
  transition: all 0.3s ease;
}

.create-btn:hover {
  background: #0052cc;
  color: white;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0, 82, 204, 0.3);
}

.btn-icon {
  margin-right: 4px;
}

/* 表格容器 */
.table-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  overflow: auto;
}

.custom-table {
  border-radius: 6px;
  overflow: hidden;
}

.custom-table :deep(.el-table__header) {
  background: #f5f7fa;
}

.custom-table :deep(.el-table__header th) {
  background: #f5f7fa;
  border-bottom: 2px solid #0052cc;
  color: #303133;
  font-weight: 600;
  padding: 12px 0;
}

.custom-table :deep(.el-table__body tr:hover > td) {
  background-color: #f0f7ff;
}

.custom-table :deep(.el-table__row--striped td) {
  background: #fafbfc;
}

.custom-table :deep(.el-table__body td) {
  padding: 12px 0;
}

/* 状态标签 */
.status-tag {
  font-weight: 500;
  border-radius: 4px;
}

.trans-pos-tag {
  background: #0052cc;
  border-color: #0052cc;
  font-weight: 500;
}

/* 操作按钮 */
.action-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  justify-content: center;
}

.action-btn {
  padding: 4px 8px;
  border-radius: 4px;
  font-weight: 500;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  gap: 4px;
}

.record-btn,
.edit-btn {
  color: #0052cc;
}

.record-btn:hover,
.edit-btn:hover {
  background: rgba(0, 82, 204, 0.1);
  transform: translateY(-1px);
}

.delete-btn {
  color: #f56c6c;
}

.delete-btn:hover {
  background: rgba(245, 108, 108, 0.1);
  transform: translateY(-1px);
}

.action-icon {
  font-size: 12px;
}

/* 分页容器 */
.pagination-container {
  background: #ffffff;
  border-radius: 8px;
  padding: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  display: flex;
  justify-content: center;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .clue-trans-rule {
    padding: 12px;
  }

  .search-container {
    padding: 16px;
    margin-bottom: 12px;
  }

  .form-row {
    flex-direction: column;
    gap: 12px;
  }

  .form-item {
    min-width: auto;
    width: 100%;
  }

  .custom-select {
    min-width: auto;
  }

  .button-group {
    justify-content: center;
    gap: 8px;
  }

  .search-btn,
  .reset-btn,
  .create-btn {
    flex: 1;
    min-width: 80px;
  }

  .table-container {
    padding: 12px;
    overflow-x: auto;
  }

  .custom-table {
    min-width: 900px;
  }

  .action-buttons {
    flex-direction: column;
    gap: 4px;
  }

  .action-btn {
    width: 100%;
    justify-content: center;
  }

  .pagination-container {
    padding: 12px;
  }
}

@media (max-width: 480px) {
  .clue-trans-rule {
    padding: 8px;
  }

  .search-container {
    padding: 12px;
  }

  .table-container {
    padding: 8px;
  }

  .custom-table {
    min-width: 1000px;
  }

  .button-group {
    flex-direction: column;
  }

  .search-btn,
  .reset-btn,
  .create-btn {
    width: 100%;
  }
}

/* 加载状态优化 */
.el-loading-mask {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(2px);
}

/* 滚动条美化 */
.table-container::-webkit-scrollbar {
  height: 6px;
  width: 6px;
}

.table-container::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb {
  background: #c1c1c1;
  border-radius: 3px;
}

.table-container::-webkit-scrollbar-thumb:hover {
  background: #0052cc;
}

/* 动画效果 */
.search-container,
.table-container,
.pagination-container {
  transition: all 0.3s ease;
}

.search-container:hover,
.table-container:hover,
.pagination-container:hover {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

/* 主题色变量 */
:root {
  --primary-color: #0052cc;
  --primary-hover: #003d99;
  --primary-light: #f0f7ff;
  --border-color: #e4e7ed;
  --text-color: #303133;
  --bg-color: #f8f9fa;
}

/* Element Plus 组件样式覆盖 */
:deep(.el-tag--success) {
  background-color: #f0f9ff;
  border-color: #0052cc;
  color: #0052cc;
}

:deep(.el-tag--primary) {
  background-color: #0052cc;
  border-color: #0052cc;
}

:deep(.el-button--primary.is-plain) {
  color: #0052cc;
  background: #f0f7ff;
  border-color: #0052cc;
}

:deep(.el-button--primary.is-plain:hover) {
  background: #0052cc;
  border-color: #0052cc;
  color: #fff;
}

:deep(.el-pagination .btn-next),
:deep(.el-pagination .btn-prev) {
  color: #0052cc;
}

:deep(.el-pagination .el-pager li.is-active) {
  background-color: #0052cc;
  color: #fff;
}

:deep(.el-pagination .el-pager li:hover) {
  color: #0052cc;
}
</style>
